/*隐藏二级导航
-------------------------------------------------------------------------------------*/

//首页 JSON 数据
var indexJson = {
    "ret": true,
    "data": {
        "navSwiperList": [{
            "id": "0001",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/154745220594.png",
            "imgDesc": "X",
            "aSrc": "./phone-summary.html"
        },{
            "id": "0002",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/154745220594.png",
            "imgDesc": "X",
            "aSrc": "./phone-summary.html"
        },{
            "id": "0003",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/154745220594.png",
            "imgDesc": "X",
            "aSrc": "./phone-summary.html"
        },{
            "id": "0004",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/154745220594.png",
            "imgDesc": "X",
            "aSrc": "./phone-summary.html"
        },{
            "id": "0005",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/154745220594.png",
            "imgDesc": "X",
            "aSrc": "./phone-summary.html"
        },{
            "id": "0006",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/154745220594.png",
            "imgDesc": "X",
            "aSrc": "./phone-summary.html"
        }],
        "navSwiperList2": [{
            "id": "0007",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/154745220594.png",
            "imgDesc": "X",
            "aSrc": "./phone-summary.html"
        },{
            "id": "0008",
            "imgUrl": "https://oss.static.nubia.cn/blockimage/154745220594.png",
            "imgDesc": "X",
            "aSrc": "./phone-summary.html"
        }],
        "navPartsList": [{
            "id": "0001",
            "imgUrl": "&#xe61c;",
            "imgDesc": "保护套",
            "aSrc": "./parts.html"
        },{
            "id": "0002",
            "imgUrl": "&#xe654;",
            "imgDesc": "耳机",
            "aSrc": "./parts.html"
        },{
            "id": "0003",
            "imgUrl": "&#xe608;",
            "imgDesc": "数据线/充电器",
            "aSrc": "./parts.html"
        },{
            "id": "0004",
            "imgUrl": "&#xe664;",
            "imgDesc": "周边产品",
            "aSrc": "./parts.html"
        }],
        "navPhotosList": [{
            "id": "0001",
            "imgUrl": "https://static.nubia.cn/v2/images/NeoVision-logo.png",
            "imgDesc": "努比亚摄影引擎",
            "aSrc": "./photo-neovision.html"
        },{
            "id": "0002",
            "imgUrl": "&#xe673;",
            "imgDesc": "摄影长廊",
            "aSrc": "./photo-gallery.html"
        },{
            "id": "0003",
            "imgUrl": "&#xe632;",
            "imgDesc": "延时摄影",
            "aSrc": "./photo-graphy.html"
        },{
            "id": "0004",
            "imgUrl": "&#xe62c;",
            "imgDesc": "星空之约",
            "aSrc": "./photo-starrySky.html"
        }]
    }
}

var indexData = indexJson.data;
// console.log(indexData.navSwiperList);



/*手机二级隐藏导航部分
--------------------------------------------------------------------------*/
//获取手机二级隐藏导航的 ul 元素
var phoneShowListUl = document.querySelectorAll(".phone-show-list");

//定义一个方法,用于动态创建二级导航中的 li 元素
function createNavPhoneList(dataList, wrapperEl) {
    for (let i = 0;i < dataList.length;i ++) {
        var imgUrl = dataList[i].imgUrl;
        var imgDesc = dataList[i].imgDesc;
        var aSrc = dataList[i].aSrc;
        wrapperEl.innerHTML += "<li><a href='" + aSrc + "'><img src='"+ imgUrl +"'/><p>" + imgDesc + "</p></a></li>";
    }    
}
createNavPhoneList(indexData.navSwiperList, phoneShowListUl[0])
createNavPhoneList(indexData.navSwiperList2, phoneShowListUl[1])


//在手机区二级导航的 li 末尾添加一个"查看更多"按钮
var watchMorePhone = "<li class='more-phone'><a href='./phone-list.html'><div><span class='iconfont'>&#xe626;</span></div><p>查看所有手机</p></a></li>"
phoneShowListUl[1].innerHTML += watchMorePhone;


/*配件二级隐藏导航部分
---------------------------------------------------------------*/
//获取手机二级隐藏导航的 ul 元素
var partsShowListUl = document.querySelector(".parts-show-list");

//定义一个方法,用于动态创建二级导航中的 li 元素
function createNavPartsList(dataList, wrapperEl) {
    for (let i = 0;i < dataList.length;i ++) {
        var imgUrl = dataList[i].imgUrl;
        var imgDesc = dataList[i].imgDesc;
        var aSrc = dataList[i].aSrc;
        wrapperEl.innerHTML += "<li><a href='" + aSrc + "'><div><span class='iconfont'> "+ imgUrl + "</span></div><p>" + imgDesc + "</p></a></li>";
    }    
}

createNavPartsList(indexData.navPartsList, partsShowListUl)

//在配件区二级导航的 li 末尾添加一个"查看更多"按钮
var watchMoreParts = "<li class='more-phone'><a href='./parts.html'><div><span class='iconfont'>&#xe626;</span></div><p>查看所有配件</p></a></li>"
partsShowListUl.innerHTML += watchMoreParts;


/*摄影二级隐藏导航部分
--------------------------------------------------------------------*/
var photoShowList = document.querySelector(".photo-show-list");

// indexData.navPhotosList
for (let i = 0;i < indexData.navPhotosList.length;i ++) {
    var imgUrl = indexData.navPhotosList[i].imgUrl;
    var imgDesc = indexData.navPhotosList[i].imgDesc;
    var imgDesc01 = indexData.navPhotosList[0].imgDesc;
    var aSrc = indexData.navPhotosList[i].aSrc;
    var aSrc01 = indexData.navPhotosList[0].aSrc;
    photoShowList.innerHTML += "<li><a href='" + aSrc + "'><div><span class='iconfont'> "+ imgUrl + "</span></div><p>" + imgDesc + "</p></a></li>";
}
var photoShowListLi01 = photoShowList.getElementsByTagName("li")[0];
photoShowListLi01.innerHTML = "<a href='" + aSrc01 + "'><img src='" + indexData.navPhotosList[0].imgUrl + "' /><p>" + imgDesc01 + "</p></a>"